<template>
  <view class="house">
    <!-- 顶部 -->
    <view class="userinfo-top">
      <view class="status-bar"></view>
      <view class="user-nav">
        <view class="user-nav-left">
          <view class="left-back" @click="topmoney()">
            <image src="../../../static/money/money-back.png" mode=""></image>
          </view>
          <view class="left-tit">
            住房公积金账户明细
          </view>
        </view>
        <view class="user-nav-right">
          <view class="right-three">
            <image src="../../../static/money/solidCircles.png" mode=""></image>
          </view>
          <view class="right-close">
            <image src="../../../static/money/wrong.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 顶部 -->
    <view class="house-con">
      <view class="house-tab">
        <view :class="show==1?'tab-active':'tab-top'" @click="tabShow(1)">全部</view>
        <view :class="show==2?'tab-active':'tab-top'" @click="tabShow(2)">缴存</view>
        <view :class="show==3?'tab-active':'tab-top'" @click="tabShow(3)">提取</view>
      </view>
      <!-- 全部 -->
      <view class="house-all" v-show="show==1">
        <view class="exist-top">
          <view class="exist-left">
            <view class="time">2022-03-13</view>
            <view class="txt">至</view>
            <view class="time">2023-03-13</view>
          </view>
          <view class="exist-right">
            <view class="blue-tit">查询</view>
            <view class="exist-image">
              <image src="../../../static/money/list.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 全部 -->
      <!-- 缴存 -->
      <view class="house-exist" v-show="show==2">
        <view class="exist-top">
          <view class="exist-left">
            <view class="time">2022-03-13</view>
            <view class="txt">至</view>
            <view class="time">2023-03-13</view>
          </view>
          <view class="exist-right">
            <view class="blue-tit">查询</view>
            <view class="exist-image">
              <image src="../../../static/money/list.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="exist-bottom">
          <view class="list-item" v-for="(item,index) in list">
            <view class="list-top">
              <view class="list-name">{{item.name}}</view>
              <view class="list-name">{{item.num}}</view>
            </view>
            <view class="list-top list-top2">
              <view class="list-time">{{item.time}}</view>
              <view class="list-time">{{item.num2}}</view>
            </view>
          </view>
        </view>
        <view class="exist-end">
          暂无更多数据
        </view>
        <!-- 广告 -->
        <view class="advert" v-if="advertShow">
          <view class="close" @click="advertHide()">
            <image src="../../../static/money/close.png" mode=""></image>
          </view>
          <view class="advert-img">
            <image src="../../../static/money/fixedImage.png" mode=""></image>
          </view>
        </view>
        <!-- 广告 -->
      </view>
      <!-- 缴存 -->
      <!-- 提取 -->
      <view class="house-take" v-show="show==3">
        <view class="exist-top">
          <view class="exist-left">
            <view class="time">2022-03-13</view>
            <view class="txt">至</view>
            <view class="time">2023-03-13</view>
          </view>
          <view class="exist-right">
            <view class="blue-tit">查询</view>
            <view class="exist-image">
              <image src="../../../static/money/list.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 提取 -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        advertShow: true,
        show: 2,
        list: [{
          name: '汇款',
          num: '294.00',
          time: '2022-10-20',
          num2: '余额：1176.00'
        }, {
          name: '汇款',
          num: '294.00',
          time: '2022-09-22',
          num2: '余额：882.00'
        }, {
          name: '汇款',
          num: '294.00',
          time: '2022-08-23',
          num2: '余额：588.00'
        }, {
          name: '汇款',
          num: '294.00',
          time: '2022-07-25',
          num2: '余额：294.00'
        }, ]
      };
    },
    methods: {
      tabShow(index) {
        this.show = index
      },
      advertHide() {
        this.advertShow = !this.advertShow
      },
      topmoney() {
        uni.navigateBack({
          delta: 1
        })
      },
    }
  }
</script>

<style lang="scss">
  .house {
    width: 100vw;

    // 顶部
    .userinfo-top {
      width: 100vw;
      height: 140rpx;
      position: fixed;
      z-index: 999;
      overflow: hidden;
      top: 0;
      background-image: linear-gradient(#7495F2, #2047C8);

      .status-bar {
        width: 100vw;
        height: var(--status-bar-height);
      }

      .user-nav {
        width: 90vw;
        margin: 0 auto;
        height: 120rpx;
        height: 88rpx;
        line-height: 88rpx;
        display: flex;
        justify-content: space-between;

        .user-nav-left {
          display: flex;

          .left-back {
            margin-right: 30rpx;

            image {
              width: 40rpx;
              height: 40rpx;
              vertical-align: middle;
            }
          }

          .left-tit {
            color: #fff;
            font-size: 40rpx;
          }
        }

        .user-nav-right {
          display: flex;

          .right-three {
            margin-right: 30rpx;

            image {
              width: 40rpx;
              height: 8rpx;
              vertical-align: middle;
            }
          }

          .right-close {
            image {
              width: 40rpx;
              height: 40rpx;
              vertical-align: middle;
            }
          }
        }
      }
    }

    // 顶部
    .house-con {
      height: 100vh;
      position: relative;
      padding-top: 140rpx;

      .house-tab {
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        justify-content: space-around;
        margin-bottom: 10rpx;

        .tab-top {
          color: #373737;
        }

        .tab-active {
          border-bottom: 4rpx solid #3D63D7;
        }
      }

      // 全部
      .house-all {
        .exist-top {
          padding: 20rpx 5vw;
          box-sizing: border-box;
          background-color: #F4F5F6;
          display: flex;
          justify-content: space-between;

          .exist-left {
            display: flex;
            padding: 5rpx 20rpx;
            box-sizing: border-box;
            border: 1px solid #E2E3E3;

            .time {
              color: #2047C8;
            }

            .txt {
              margin: 0 20rpx;
            }
          }

          .exist-right {
            display: flex;

            .blue-tit {
              background-color: #3D63D7;
              color: #fff;
              border-radius: 10rpx;
              padding: 5rpx 10rpx;
              box-sizing: border-box;
              margin-right: 30rpx;
            }

            .exist-image {
              image {
                width: 50rpx;
                height: 50rpx;
                vertical-align: middle;
              }
            }
          }
        }
      }

      // 缴存
      .house-exist {
        position: relative;

        .exist-top {
          padding: 20rpx 5vw;
          box-sizing: border-box;
          background-color: #F4F5F6;
          display: flex;
          justify-content: space-between;

          .exist-left {
            display: flex;
            padding: 5rpx 20rpx;
            box-sizing: border-box;
            border: 1px solid #E2E3E3;

            .time {
              color: #2047C8;
            }

            .txt {
              margin: 0 20rpx;
            }
          }

          .exist-right {
            display: flex;

            .blue-tit {
              background-color: #3D63D7;
              color: #fff;
              border-radius: 10rpx;
              padding: 5rpx 10rpx;
              box-sizing: border-box;
              margin-right: 30rpx;
            }

            .exist-image {
              image {
                width: 50rpx;
                height: 50rpx;
                vertical-align: middle;
              }
            }
          }
        }

        .exist-bottom {
          width: 90vw;
          margin: 0 auto;

          .list-item {
            padding: 20rpx 0;
            box-sizing: border-box;
            border-bottom: 1px solid #F4F4F4;

            .list-top {
              display: flex;
              justify-content: space-between;

              .list-time {
                color: #A3A3A3;
                font-size: 30rpx;
              }
            }

            .list-top2 {
              margin-top: 20rpx;
            }
          }
        }

        .exist-end {
          text-align: center;
          font-size: 30rpx;
          color: #A3A3A3;
          margin-top: 30rpx;
        }

        // 广告
        .advert {
          width: 30vw;
          position: absolute;
          top: 65vh;
          right: 5vw;

          .close {
            text-align: right;

            image {
              width: 50rpx;
              height: 50rpx;
            }
          }

          .advert-img {
            text-align: center;

            image {
              width: 220rpx;
              height: 200rpx;
            }
          }
        }
      }

      // 提取
      .house-take {
        .exist-top {
          padding: 20rpx 5vw;
          box-sizing: border-box;
          background-color: #F4F5F6;
          display: flex;
          justify-content: space-between;

          .exist-left {
            display: flex;
            padding: 5rpx 20rpx;
            box-sizing: border-box;
            border: 1px solid #E2E3E3;

            .time {
              color: #2047C8;
            }

            .txt {
              margin: 0 20rpx;
            }
          }

          .exist-right {
            display: flex;

            .blue-tit {
              background-color: #3D63D7;
              color: #fff;
              border-radius: 10rpx;
              padding: 5rpx 10rpx;
              box-sizing: border-box;
              margin-right: 30rpx;
            }

            .exist-image {
              image {
                width: 50rpx;
                height: 50rpx;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
</style>